<template>
  <div class="my-survey">
    <!-- 标签栏 -->
    <div class="tab-bar">
      <div v-for="(tab, index) in ['创建的问卷', '收到的问卷', '已过期']" :key="index" class="tab"
        :class="activatedTab === index ? 'activated' : ''" @click="tabClickHandle(index)">
        {{ tab }}
        <!-- 未读问卷小红点 -->
        <div class="unread-dot" v-if="tab === '收到的问卷' && unreadQuestionnaireCount > 0"></div>
      </div>
    </div>
    <!-- 回收站标志 -->
    <div class="recycle-bin" @click="navigateTo('survey-recycle-bin')">
      <image class="icon-img" src="/static/icons/common/recycle-bin.svg" mode="" />
      回收站
    </div>
    <!-- 问卷列表轮播器 -->
    <swiper class="content-list" :style="{ 'height': `${swiperHeight}px` }" :current="activatedTab"
      @change="contentChangeHandle">
      <!-- 创建的问卷 -->
      <swiper-item>
        <div class="content created">
          <!-- 从空白处新建 -->
          <div class="questionnaire create-new" @click="createNewByBlank">
            <div class="questionnaire-board">
              <image class="plus-icon" src="/static/icons/common/plus.svg"></image>
              <text class="tip">台词助手可根据问卷内容生成台词哦～快去<text class="emphasize">创建</text>一份问卷试试吧</text>
            </div>
            <text class="questionnaire-title">从空白处新建</text>
          </div>
          <!-- 已经创建的问卷 -->
          <questionnaire-card type="created" v-for="questionnaire in createdQuestionnaireList" :key="questionnaire.id"
            :id="questionnaire.id" :title="questionnaire.title"
            :weddingDate="questionnaire.deadline"></questionnaire-card>
        </div>
      </swiper-item>
      <!-- 收到的问卷 -->
      <swiper-item>
        <div class="content received">
          <questionnaire-card type="received" v-for="questionnaire in receivedQuestionnaireList" :key="questionnaire.id"
            :id="questionnaire.id" :title="questionnaire.title" :weddingDate="questionnaire.deadline"
            :feedbackDate="questionnaire.feedbackDate" :fillInPerson="getQuestionnaireFiller(questionnaire)">
          </questionnaire-card>
        </div>
      </swiper-item>
      <!-- 已过期的问卷 -->
      <swiper-item>
        <div class="content expired">
          <questionnaire-card type="expired" v-for="questionnaire in expiredQuestionnaireList" :key="questionnaire.id"
            :id="questionnaire.id" :title="questionnaire.title" :weddingDate="questionnaire.deadline"
            :feedbackDate="questionnaire.feedbackDate">
          </questionnaire-card>
        </div>
      </swiper-item>
    </swiper>
  </div>
</template>

<script lang="ts" setup>
import QuestionnaireCard from '@/components/questionnaire-card.vue'
import { ref, getCurrentInstance, onUpdated } from 'vue'
import { useQuestionnaire } from '@/stores/questionnaire'
import { storeToRefs } from 'pinia'
import { navigateTo } from '@/utils/navigate'
import { useQuestionnaireList } from '@/stores/questionnaire-list'
import { onPullDownRefresh, onReachBottom, onShow } from '@dcloudio/uni-app'
import { getQuestionnaireFiller } from '@/utils/others'
import { watch } from 'vue'
import { onMounted } from 'vue'
import { getLocalToken } from '@/utils/token'

const questionnaireListStore = useQuestionnaireList()

type Props = {
  /** 要显示的问卷列表类型 */
  questionnaireListToShow: 'created' | 'received' | 'expired'
}

const props = withDefaults(defineProps<Props>(), {
  questionnaireListToShow: 'created'
})

//#region  未读问卷相关
// 问卷列表和是否有未读问卷
const {
  createdQuestionnaireList, receivedQuestionnaireList, expiredQuestionnaireList, unreadQuestionnaireCount
} = storeToRefs(questionnaireListStore);

// 问卷列表相关方法和标记已读
const {
  getQuestionnaireList, resetQuestionnaireList, markAllQuestionnaireRead
} = questionnaireListStore

// 挂载后检查props，如果props中指定了显示收到的问卷，则标记已读
onMounted(() => {
  if (props.questionnaireListToShow === 'received') {
    markAllQuestionnaireRead()
  }
})
//#endregion

//#region 轮播图相关

/** 各问卷列表对应的tab */
const tabList = ['created', 'received', 'expired']

// 当前选中的tab的index
const activatedTab = ref(tabList.indexOf(props.questionnaireListToShow))

// tab切换
const tabClickHandle = (index: number) => {
  activatedTab.value = index
}

// 切换显示内容时
const contentChangeHandle = (e: any) => {
  activatedTab.value = e.detail.current
}

// 监听切换到已收到的问卷时，触发标记已读
watch(activatedTab, (newVal) => {
  console.log('activatedTab', newVal)
  if (newVal === 1) {
    markAllQuestionnaireRead()
  }
})

/** 轮播图高度（取.content中高度最大者） */
const swiperHeight = ref(0)

/** 组件实例 */
const instance = getCurrentInstance()

/** 计算轮播图高度 */
const calcSwiperHeight = () => {
  const query = uni.createSelectorQuery().in(instance)
  query.selectAll('.content').boundingClientRect((data) => {
    // 如果不是数组，转换为数组
    if (!Array.isArray(data)) {
      data = [data]
    }
    // 获取高度最大者
    const maxHeight = Math.max(...data.map(item => item.height!))
    swiperHeight.value = maxHeight
  }).exec()
}

// 每次更新时，重新计算轮播图高度
// XXX 使用onUpdated会在首次加载时就执行4次，尝试使用onMounted、onReady，但是都会出现设定高度不正确的情况
onUpdated(() => {
  calcSwiperHeight()
})

//#endregion

//#region 问卷列表的获取和显示相关

// 显示时，获取所有问卷
onShow(async () => {
  // XXX 暂时使用setTimeout，等待静默登录完成，后续需要修改
  setTimeout(async () => {
    // 重置已创建的问卷
    resetQuestionnaireList('created')
    // 获取已创建的问卷
    await getQuestionnaireList('created')
    // 重置已接收的问卷
    resetQuestionnaireList('received')
    // 获取已接收的问卷
    await getQuestionnaireList('received')
    // 重置已过期的问卷
    resetQuestionnaireList('expired')
    // 获取已过期的问卷
    await getQuestionnaireList('expired')
  }, 500)
})

// // 下拉刷新时，获取所有问卷
onPullDownRefresh(async () => {
  uni.showLoading({
    title: '加载中'
  })
  console.log('下拉刷新', getLocalToken())
  // 重置已创建的问卷
  resetQuestionnaireList('created')
  // 获取已创建的问卷
  await getQuestionnaireList('created')
  // 重置已接收的问卷
  resetQuestionnaireList('received')
  // 获取已接收的问卷
  await getQuestionnaireList('received')
  // 重置已过期的问卷
  resetQuestionnaireList('expired')
  // 获取已过期的问卷
  await getQuestionnaireList('expired')
  uni.hideLoading()
})

// 触底时，获取更多问卷
// XXX 未设置自动销毁dom，可能在问卷数极大时存在性能问题，待优化
onReachBottom(() => {
  getQuestionnaireList()
})
//#endregion

/** 从空白处新建问卷 */
const createNewByBlank = () => {
  navigateTo('questionnaire-template-preview', {
    templateId: '0'
  })
}
</script>

<style lang="scss" scoped>
// 我的问卷
.my-survey {
  display: grid;
  grid-template:
    'tab-bar recycle-bin' 6.1538vw
    'content content' 1fr
    / 1fr 17.9487vw;
  grid-gap: 0px 10px;
  padding: 0 16px 50px 23px;


  .tab-bar {
    grid-area: tab-bar;

    display: flex;

    .tab {
      line-height: 6.1538vw;

      font-size: 28.85rpx;
      color: #333333;
      margin-right: 40.77rpx;

      position: relative;

      &.activated {
        font-size: 32.69rpx;
        font-weight: 600;
        color: #000000;

        position: relative;

        // 下方的横线
        &::after {
          content: '';
          position: absolute;
          bottom: 2px;
          left: 50%;
          transform: translateX(-50%);
          width: 12.3077vw;
          height: 4px;
          background: #17ce92;
        }
      }

      // 未读问卷小红点
      .unread-dot {
        position: absolute;
        top: 2px;
        right: -4px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #fe3737;
      }
    }


  }

  // 回收站图标
  .recycle-bin {
    grid-area: recycle-bin;

    height: 46.15rpx;
    background: rgba(255, 255, 255, .56);
    border-radius: 115.38rpx;
    line-height: 46.15rpx;
    font-size: 21.15rpx;


    color: #333333;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .icon-img {
      width: 38.46rpx;
      height: 38.46rpx;
    }
  }

  // 内容
  .content-list {
    grid-area: content;
    width: 100%;
    min-height: 50vw;

    // 创建的问卷、收到的问卷、已过期共用的样式
    .content {
      padding-top: 10px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-auto-rows: 47.6923vw;
      grid-gap: 10px 10px;
      justify-items: stretch;
    }

    // 创建的问卷
    .created {

      // 从空白处新建
      .create-new {
        display: grid;
        grid-template:
          'board' 39.2308vw
          'title' 5.1282vw;
        grid-gap: 12px 0;

        // 问卷面板（不含具体的定位样式代码）
        .questionnaire-board {
          box-sizing: border-box;
          width: 100%;

          background: #ffffff;
          border-radius: 4px;
          box-shadow: 0px 1px 4px 0px rgba(190, 190, 190, 0.25);

          padding: 33px 6px 0 6px;
          display: grid;
          grid-template:
            'plus-icon' 36px
            'tip' 20px;
          justify-items: center;
          grid-row-gap: 22px;

          position: relative;

          // 顶部的装饰性线条
          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);

            width: 100%;
            height: 2px;
            border-radius: 7px;
            background-color: #17CE92
          }

          // 加号图标
          .plus-icon {
            grid-area: plus-icon;
            width: 9.2308vw;
            height: 9.2308vw;
          }

          // 提示文字
          .tip {
            font-size: 1.7949vw;
            color: #666666;

            .emphasize {
              color: #17ce92;
              border-bottom: 2rpx solid #17ce92;
            }
          }
        }

        // 问卷名称
        .questionnaire-title {
          grid-area: title;
          font-size: 19.23rpx;

          font-weight: 600;
          text-align: center;
          color: #333333;
        }
      }
    }
  }
}
</style>
